<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>摄像头拍照</title>
</head>
<h1 style="text-align:center">人脸识别</h1>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
    #capture{
        position: absolute;
        right: 190px;
        bottom: -40px;

    }
    #video{
        position: absolute;
        right: 0;
        top: 0;
    }
    #img{
        position: absolute;
        left: 0;
        top: 0;
    }
    .auto{
        position: absolute;
        left: 50%;
        top: 50%;
        height: 320px;
        margin-top: -160px;
    }
    #sure{
        position: absolute;
        left: 210px;
        bottom: -40px;

    }
    button{
        cursor: pointer;
        margin: 0 auto;
        border: 1px solid #f0f0f0;
        background: #5CACEE;
        color: #FFF;
        width: 100px;
        height: 36px;
        line-height: 36px;
        border-radius: 8px;
        text-align: center;
        /*禁止选择*/
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -khtml-user-select: none; /* Konqueror */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently not supported by any browser */
    }

</style>
<body>
<div class="auto">
    <video id="video" width="480" height="320" autoplay></video>
    <canvas id="canvas" width="480" height="320" style="display: none;"></canvas>
    <img src="./body_default.png" id="img" width="480" height="320" style="margin-left: 20px;">
    <div>
        <button id="capture" title="点击进行拍照">拍照</button>
    </div>
    <div>
        <button id="sure" title="是否用这张图片进行验证" onclick="login()">确认</button>
    </div>
</div>
<script type="text/javascript" >
    function  login()
    {
        alert("签到成功");
        window.location.href="/WebRoot/web_MainForm.jsp";
    }
</script>

<script>
    var file ,stream;
    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints,success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }
    }

    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');

    function success(stream) {
        //兼容webkit核心浏览器
        let CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        console.log(stream);
        stream = stream;
        //video.src = CompatibleURL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    }

    function error(error) {
        console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        //调用用户媒体设备, 访问摄像头
        getUserMedia({video : {width: 480, height: 320}}, success, error);
    } else {
        alert('不支持访问用户媒体');
    }
    // base64转文件

    document.getElementById('capture').addEventListener('click', function () {
        context.drawImage(video, 0, 0, 480, 320);
        // 获取图片base64链接
        var image = canvas.toDataURL('image/png');
        // 定义一个img
        var img = document.getElementById("img");
        //设置属性和src
        //img.id = "imgBoxxx";
        img.src = image;
        //将图片添加到页面中
        //document.body.appendChild(img);
        function dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            file = new File([u8arr], filename, {type: mime});
            return new File([u8arr], filename, {type: mime});
        }
        console.log(dataURLtoFile(image, 'aa.png'));
    })

    document.getElementById('sure').addEventListener('click', function () {
        var formData = new FormData();
        formData.append("file",file);
        $.ajax({
            type: "POST", // 数据提交类型
            url: "SubmitCheck.do", // 发送地址
            data: formData, //发送数据
            async: true, // 是否异步
            processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            contentType: false,
            success:function(data){
                if(data.code === 0){
                    console.log(`${data.message}`);
                }else{
                    console.log(`${data.message}`);
                }
            },
            error:function(e){
                self.$message.warning(`${e}`);
                //console.log("不成功"+e);
            }
        });
        stream.getTracks()[0].stop();//结束关闭流
    })

    layui.use(['upload', 'element', 'layer'], function(){
            var $ = layui.jquery
                ,upload = layui.upload
                ,element = layui.element
                ,layer = layui.layer;

            //常规使用 - 普通图片上传
            var sqlimgurl='';
            var uploadInst = upload.render({
                elem: '#sure'
                ,url: 'SubmitCheck.do' //改成您自己的上传接口
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#img').attr('src', result); //图片链接（base64）
                    });

                    element.progress('demo', '0%'); //进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                }
                ,done: function(res){
                    //上传成功的一些操作
                    sqlimgurl=res.data.src;
                    $('#demoText').html(''); //置空上传失败的状态
                }
                ,error: function(){
                }
                //进度条
                ,progress: function(n, elem, e){
                    element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                    if(n == 100){
                        layer.msg('上传完毕', {icon: 1});
                    }
                }
            });
        }
    )
</script>
</body>
</html>
